<template>
	<view class="page">
		<u-navbar title="通过文字" back-icon-color="#fff" title-color="#fff" :background="background"></u-navbar>
		<!-- 输入文案 -->
		<view class="top_con">
			<!-- 标题 -->
			<view class="title">
				<view class="t_left">
					<view class="line"></view>
					<text>AI文案</text>
				</view>
				<view class="t_right" @click="delInput">
					<image class="clear-img" src="../../static/image/other/del-ai-icon.png" mode=""></image>
				</view>
			</view>
			<!-- 文本框 -->
			<view class="textare">
				<textarea v-model="inputValue" @input="addInput" :maxlength="3000" class="text_2"
					placeholder-class="text_2 " placeholder="请输入文案"></textarea>
			</view>

			<!-- 功能区 -->
			<view class="t_bott">
				<view class="bot_le">
					<view class="le_two mr-16" @click="aiCreate">
						<image class="image_3" src="../../static/image/other/ai-create.png" mode="" />
						<text class="font">AI生成</text>
					</view>
					<view class="le_two" @click="aiRecord">
						<image class="image_3" src="../../static/image/other/ai-lu.png" mode="" />
						<text class="font">录音</text>
					</view>

				</view>
				<view class="bot_ri" :class="[{'bot_ri_active':isactvie}]" @touchstart="touchstart" @touchend="touchend">
					<image v-show="!isactvie" class="image_15" src="../../static/image/other/AI-Voice.png"
						binderror="handleImageError" />
					<image v-show="isactvie" class="image_gif" src="../../static/image/other/Voice.gif"
						binderror="handleImageError" />
					<view class="">{{isactvie?"正在输入":"语音输入"}}</view>
				</view>
			</view>
		</view>
		<!-- 字数 -->
		<view class="text_num">{{textlinnght}}<text>/3000</text> </view>

		<!-- 语种 -->
		<view class="languages_con">
			<view style="position: relative;width: 100%;">
				<u-tabs :list="list" bg-color="#262626" inactive-color="#999999" :current="current" font-size="26"
					active-color="#fff" :bar-style="barstyle" :bold="false" @change="change">
				</u-tabs>
				<view class="linetab"></view>
			</view>
			<scroll-view class="scrollView" scroll-y="true" :enable-flex="true" :show-scrollbar="false"
				:scroll-top="scrollToTop ">
				<view class="languages_ul">
					<view @click="Openhui()" :style="{height:lauwid+'px'}" class="languages_li addli" v-if="current === 0 ">+</view>
					<view :style="{height:lauwid+'px'}" 
					:class="[{'border_green':lauindex == ind,'languages_li':current!=1,'fourli':current == 1}]"
						@click="selctlau(it,ind)" v-for="(it,ind) in languagesAll" :key="ind">
						<text class="li_text" v-show="!it.isClick">{{it.title}}</text>
						<!-- 推荐 -->
						<view class="image_18" >
							<image 
								v-if="(!it.list || it.list.status == '2')&&current == 1" :style="{width:(lauwid/2)+'px',height:'30rpx'}" src="../../static/image/other/xunlian.png"
								mode="widthFix" />
							<image
								v-if="current!==1&&ind<2" :style="{width:(lauwid/2)+'px',height:'30rpx'}" src="../../static/image/other/yuiijian.png"
								mode="widthFix" />
						</view>
						<!-- 波浪图 -->
						<image v-show="it.isClick" :style="{width:(lauwid/1.5)+'px'}" class="image_5"
							src="https://zhuocheng.axu9.com/images/playing.gif" mode="widthFix" />
						<!-- 编辑 -->
						<view class="edit" v-if="!it.isClick && current == 1 && !(!it.list || it.list.status == '2')" @click.stop="editxiao(it,ind)">
							<image class="edit-img" src="../../static/image/other/edit-btn.png" mode=""></image>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>


		<!-- 生成按钮 -->
		<view class="bottom">
			<view class="btn" @click="subCreate">生成</view>
		</view>

		<!-- AI生成文案gif加载弹窗 -->
		<u-popup v-model="aiGifShow" mode="center" :mask-close-able="false">
			<view style="background: #0d0d0e;">
				<image class="ai-gif-class" src="https://heigeng.axu9.com/images/ai-shengcheng-gif.gif" mode=""></image>
			</view>
		</u-popup>
		<!-- 设置标题弹窗 -->
		<audioTitlePop ref="audiotitle" @submit="submit" :isLoading="isLoading" ></audioTitlePop>
		<!-- 修改音色提示弹窗 -->
		<changeTimbrePop ref="changeTimbre" @submit="changeTimbreSubmit"></changeTimbrePop>

	</view>
</template>

<script>
	import commonData from '@/common/js/data.js';
	// 语音输入
	var plugin = requirePlugin('WechatSI');
	let manager = plugin.getRecordRecognitionManager();
	// 播放音频
	let innerAudioContext = null

	import {
		getTimbre, //获取音色列表
		cateSelect, //分类名称
		getMinorlanguages ,//小语种
		aliHecheng,//合成标题
		timbreSynthesis,//合成标题
		timbreSynthesisRe,//合成语音调用 第二次
		Minorlanguagesclone,//小语种克隆
	} from '@/api/audio.js';
	import {
		getUserinfo//用户个人信息
	} from "@/api/user.js"
	import {
		createAI
	} from '@/api/video.js';
	import audioTitlePop from '../../components/audioTitlePop';
	import changeTimbrePop from "../../components/changeTimbrePop/index.vue";

	export default {
		components: {
			audioTitlePop,
			changeTimbrePop
		},
		data() {
			return {
				inputValue: "", //文本内容
				textlinnght: 0,
				isactvie: false, //长按语音输入
				list: [{name:"我的"},{name:"小语种"}], //语种分类
				minorList: [], //小语种
				mineList: [], //我的语种
				languagesAll: [], //语种
				current: 0,
				barstyle: {
					backgroundColor: '#01f5f6'
				},
				lauwid: 0, //语种宽度
				fourwid:0,
				fivewid:0,
				lauindex: -1, //选中语种索引
				scrollToTop: 0,
				isplay: -1, //播放的语种
				aiGifShow: false,
				isLoading: false,
				timbreUrl: "", //音频路径
				audioTitle: '', //音频标题
				timbreId:"",//音频id
				audioId:"",//接口获取的//合成的音频id
				toOptionType: 1, //
				toAddType:1,//1个人中心
				videoPath:"",//视频路径
				clickoption: 1, //1音频选项--通过文字 2视频提取文字
				cloneId:"",
				xiaoyu:{
					id:"",
					listId:""
				},
				commonData: {}
			}
		},
		async onLoad(options) {
			console.log(options);
			this.toAddType = options.toAddType ? options.toAddType : 1;
			this.videoPath = options.videoPath ? options.videoPath : '';
			this.clickoption = options.clickoption ? options.clickoption : 1;
			this.toOptionType = options.toOptionType ? options.toOptionType : 1;
			// this.inputValue = uni.getStorageSync("wenan") ? uni.getStorageSync("wenan") : '';
			this.inputValue = options.videoContent ? options.videoContent : uni.getStorageSync('wenan') ? uni.getStorageSync('wenan') : '';
			this.textlinnght = this.inputValue.length
			this.audioId = options.audioId ? options.audioId : '';
			innerAudioContext = uni.createInnerAudioContext();
			
			const query = uni.createSelectorQuery().in(this);
			query
				.select(".addli")
				.boundingClientRect((data) => {
					if (data) {
						this.lauwid = data.width
						this.fivewid = data.width
					}
				})
				.exec();
				
				


			
			// 我的音色
			let mine = await getTimbre({
				uid: uni.getStorageSync('userId'),
				type: 2 //默认传2
			})
			this.mineList = mine.data
			this.getmine()//我的
			this.getxiao()//小语种
			
			// 语种分类
			let cate = await cateSelect()
			let arr = cate.data.map(item => {
				item['name'] = item.title
				return item
			})
			this.list = [...this.list,...arr]
			// let data = await getTimbre({
			// 	uid: uni.getStorageSync('userId'),
			// 	type: 0 //默认传2
			// })
			// console.log(data);
			
			
			// 语音输入事件
			this.initRecord()
			

			innerAudioContext.onPlay(() => {
				console.log(this.isplay, "播放事件");
				this.languagesAll[this.isplay].isClick = true
				console.log('开始播放');
			});
			innerAudioContext.onEnded((res) => {
				this.languagesAll[this.isplay].isClick = false
				this.isplay = -1
			})

		},
		async onShow() {
			// 小语种
			// let minor = await getMinorlanguages({
			// 	uid:uni.getStorageSync('userId')
			// })
			// this.minorList = minor.data
			this.commonData = commonData;
			if(this.current == 1){
				this.getxiao(1)
			}
		},
		onUnload() {
			if (innerAudioContext) {
				innerAudioContext.stop();
				innerAudioContext.destroy();
			}
			uni.setStorageSync('wenan', this.inputValue);
		},
		onHide() {
			if (innerAudioContext) {
				innerAudioContext.stop();
				if(this.isplay == -1)return
				this.languagesAll[this.isplay].isClick = false
				this.isplay = -1
			}
			uni.setStorageSync('wenan', this.inputValue);
		},
		methods: {
			change(index) {
				this.current = index;
				this.timbreUrl = ""
				this.lauindex = -1
				this.languagesAll = []
				this.scrollToTop = this.scrollToTop == 0 ? 0.1 : 0
				this.lauwid = this.fivewid
				this.isplay = -1
				innerAudioContext.stop()
				if (index === 0) {
					this.getmine()
				} else if (index === 1) {
					this.languagesAll = this.minorList.map(item => {
						return {
							...item,
							isClick: false
						};
					})
					if(this.fourwid == 0){
						setTimeout(()=>{
							const query = uni.createSelectorQuery().in(this);
							query
								.select(".fourli")
								.boundingClientRect((data) => {
									if (data) {
										this.lauwid = data.width
										this.fourwid = data.width
									}
								})
								.exec();
						},10)
					}else{
						this.lauwid = this.fourwid
					}
					
				} else {
					this.languagesAll = this.list[index].cate.map(item => {
						return {
							...item,
							isClick: false
						};
					})
				}
			},
			// 我的
			getmine(){
				this.languagesAll = this.mineList.map(item => {
					return {
						...item,
						isClick: false
					};
				})
			},
			// 小语种
			async getxiao(ind){
				let minor = await getMinorlanguages({
					uid:uni.getStorageSync('userId')
				})
				// minor.data.shift()
				this.minorList = minor.data
				
				if(ind == 1){
					this.languagesAll = minor.data.map(item => {
						return {
							...item,
							isClick: false
						};
					})
					if(this.lauindex!=-1&&minor.data[this.lauindex].list){
						this.timbreUrl = minor.data[this.lauindex].list.mp3_url
						this.timbreId = minor.data[this.lauindex].id
						this.cloneId = minor.data[this.lauindex].list.cloneId
					}
				}
			},
			// 开通会员
			async Openhui(){
				// 不是会员就提醒,是就跳转
				let res = await getUserinfo({
					uid:uni.getStorageSync("userId")
				})
				if(res.data.level_id == 1 || res.data.level_id == 2 || res.data.level_id == 3){
					uni.navigateTo({
						url:"/pagesMine/openMembership/index"
					})
				}else{
					uni.showToast({
						title:"您还不是会员",
						icon:"none"
					})
				}
				
			},
			// 清空文本内容
			delInput() {
				this.textlinnght = 0
				this.inputValue = ""
			},
			addInput(e) {
				this.textlinnght = e.detail.cursor
			},
			// 语音输入,触摸开始
			touchstart(e) {
				// 微信小程序不支持震动
				// uni.vibrate({
				// 	success: () => {
				// 		console.log('短震动成功');
				// 	},
				// 	fail: (err) => {
				// 		console.error('短震动失败:', err);
				// 	}
				// });
				manager.start({
					lang: 'zh_CN'
				});
				this.isactvie = true
			},
			// 语音输入,触摸结束
			touchend(e) {
				this.isactvie = false
				uni.showLoading({
					title:"文字生成中",
					mask:true
				})
				manager.stop();
			},
			initRecord() {
				//有新的识别内容返回，则会调用此事件
				manager.onRecognize = (res) => {
					let text = res.result;
					console.log(res);
				};
				// 识别结束事件
				manager.onStop = (res) => {
					uni.hideLoading()
					if(res.result == "")return
					this.textlinnght += res.result.length
					this.inputValue += res.result
					console.log(res, 37);

				},
				// 识别错误事件  
				manager.onError = (res) => {
					uni.hideLoading()
					uni.showToast({
						title:"语音识别失败",
						icon:"none"
					})
				}

			},
			// 选中语种
			selctlau(it, ind) {
				this.lauindex = ind
				this.timbreUrl = ""
				if (this.current == 1) {
					console.log("小语种");
					if (!it.list || it.list.status == "2") {
						let listid = it.list ? it.list.id : ""
						uni.navigateTo({
							url:"/pagesMine/editTimbre/index?type=editxiao&id="+ it.id + "&listid="+ listid
						})
						// innerAudioContext.stop()
						// this.languagesAll[this.isplay].isClick = false
						return
					}
					// innerAudioContext.src = it.list.mp3_url
					this.timbreUrl = it.list.mp3_url
					this.timbreId = it.id
					this.cloneId = it.list.cloneId
					return
				} else {
					innerAudioContext.src = it.mp3
					this.timbreUrl = it.mp3
					this.timbreId = it.id
					console.log("其他");
				}
				if (this.isplay == -1) {
					this.isplay = ind
					innerAudioContext.play()
				} else {
					if (this.isplay == ind) {
						innerAudioContext.stop()
						this.isplay = -1
						this.languagesAll[ind].isClick = false
					} else {
						this.languagesAll[this.isplay].isClick = false
						this.isplay = ind
						innerAudioContext.play()
					}
				}
				// return it.isClick = it.isClick ? false : true
			},
			// AI生成
			aiCreate() {
				if (this.inputValue == '') {
					uni.showToast({
						title: '输入内容不能为空',
						icon: 'none'
					});
					return;
				}
				this.aiGifShow = true;
				let arr = [];
				arr.push({
					role: 'user',
					content: this.inputValue
				});
				createAI({
						uid: uni.getStorageSync('userId'),
						text: JSON.stringify(arr)
					})
					.then((res) => {
						this.aiGifShow = false;
						this.inputValue = res.data;
						this.textlinnght = res.data.length
					})
					.catch((err) => {
						this.aiGifShow = false;
						ubni.showToast({
							title: '生成失败',
							icon: 'none'
						});
					});
			},
			// 编辑小语种
			editxiao(it, ind) {
				this.$refs.changeTimbre.open();
				let listid = it.list ? it.list.id : ""
				this.xiaoyu.id = it.id
				this.xiaoyu.listId = listid
			},
			changeTimbreSubmit(){
				this.$refs.changeTimbre.close()
				uni.navigateTo({
					url:"/pagesMine/editTimbre/index?type=editxiao&id="+ this.xiaoyu.id + "&listid="+ this.xiaoyu.listId
				})
			},
			// AI录制
			aiRecord() {
				if (this.inputValue == '') {
					uni.showToast({
						title: '文案为空，请先生成文案',
						icon: 'none'
					});
					return;
				}
				uni.navigateTo({
					url: '/pagesCreate/addAudio/index?wenan=' +
						this.inputValue +
						'&toAddType=2' +
						'&videoPath=' +
						this.videoPath +
						'&clickoption=' +
						this.clickoption +
						'&toOptionType=' +
						this.toOptionType
				});
			},
			submit(data) {
				this.audioTitle = data;
				uni.showLoading({
					title: '合成中'
				});
				// this.isLoading = true;
				if (this.current == 0) {
					// 通过音色合成语音（直接跳转不用等待）
					this.toMineTimbreSynthesis();
				} else if(this.current == 1){
					// 小语种
					this.toXiaoyuzhong()
				}else{
					// 阿里语音合成
					this.toAliTimbreSynthesis();
				}
				
				
			},
			// 生成
			subCreate() {

				if (this.inputValue == '') {
					uni.showToast({
						title: '文案不能为空',
						icon: 'none'
					});
					return;
				}
				if (this.timbreUrl == "") {
					uni.showToast({
						title: '音色未选择',
						icon: 'none'
					});
					return;
				}
				if(!containsChinese(this.inputValue)){
					uni.showToast({
						title:"当前文案非中文,建议使用小语种",
						icon:"none",
						duration:1500
					})
				}
				if (this.isplay != -1) {
					innerAudioContext.stop();
					this.languagesAll[this.isplay].isClick = false
					this.isplay = -1
				}
				this.$refs.audiotitle.open();
				
				function containsChinese(str) {
					// return  /[\u4e00-\u9fff\u3000-\u303F\uFF00-\uFF60\s]+$/.test(str)
					// return /^[\u4E00-\u9FA5]$/.test(str);
				  return /[\u4e00-\u9fa5]/.test(str);
				}
			},
			rederect(){
				innerAudioContext.stop();
				innerAudioContext.src = '';
				// innerAudioContext.destroy();
				if (this.toOptionType == 1) {
					uni.reLaunch({
						url: '/pages/create/index?audioTitle=' + this.audioTitle + '&audioUrl=' + this.audioUrl + '&videoPath=' + this.videoPath + '&audioId=' + this.audioId
					});
				} else if (this.toOptionType == 2) {
					uni.redirectTo({
						url: '/pagesHome/audioList/index?videoPath=' + this.videoPath
					});
				} else if (this.toOptionType == 3) {
					uni.navigateBack({delta:uni.getStorageSync("gateback")})
					// uni.redirectTo({
					// 	url: '/pagesMine/worksLibrary/index?current=1'
					// });
				}
			},
			secondUpload(){
				timbreSynthesisRe({
					mp3_id: this.audioId,
					timbre_id: this.timbreId.toString()
				})
					.then((res) => {
						console.log(res, 'ksksks');
						if (res.errno == 1) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					})
					.catch((err) => {
						uni.showToast({
							title: '出错了',
							icon: 'none'
						});
					});
			},
			// 我的
			toMineTimbreSynthesis() {
				if (this.isLoading) {
					uni.showToast({
						title: '请勿重复点击',
						icon: 'none'
					});
					return;
				}
				this.isLoading = true;
				timbreSynthesis({
					uid: uni.getStorageSync('userId'),
					title: this.audioTitle,
					text: this.inputValue,
					mp3: this.timbreUrl,//我的mp3
					timbre_id: this.timbreId
				})
					.then((res) => {
						console.log(res);
						this.isLoading = false;
						uni.hideLoading();
						if (res.errno == 0) {
							// uni.hideLoading();
							this.audioId = res.data;
							this.secondUpload();
							this.rederect();
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					})
					.catch((err) => {
						this.isLoading = false;
						uni.hideLoading();
						console.log(err, 'rrrr');
						uni.showToast({
							title: '出错了',
							icon: 'none'
						});
					});
			},
			// 全部
			toAliTimbreSynthesis() {
				if (this.isLoading) {
					uni.showToast({
						title: '请勿重复点击',
						icon: 'none'
					});
					return;
				}
				this.isLoading = true;
				aliHecheng({
					uid: uni.getStorageSync('userId'),
					title: this.audioTitle,
					text: this.inputValue,
					// mp3: this.timbreUrl,//全部的MP3
					timbre_id: this.timbreId
				})
					.then((res) => {
						this.isLoading = false;
						uni.hideLoading();
						if (res.errno == 0) {
							// this.audioUrl = res.data;
							this.audioId = res.data;
							this.rederect();
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					})
					.catch((err) => {
						this.isLoading = false;
						console.log(err, 'rrrr');
						uni.showToast({
							title: '出错了',
							icon: 'none'
						});
					});
				console.log(this.videoPath, 'this.videoPath');
			},
			// 小语种
			toXiaoyuzhong(){
				if (this.isLoading) {
					uni.showToast({
						title: '请勿重复点击',
						icon: 'none'
					});
					return;
				}
				this.isLoading = true;
				Minorlanguagesclone({
					uid: uni.getStorageSync('userId'),
					title: this.audioTitle,
					text: this.inputValue,
					// mp3: this.timbreUrl,//全部的MP3
					lan_id: this.timbreId,
					cloneId:this.cloneId
				})
					.then((res) => {
						this.isLoading = false;
						uni.hideLoading();
						if (res.errno == 0) {
							// this.audioUrl = res.data;
							this.audioId = res.data;
							this.rederect();
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					})
					.catch((err) => {
						this.isLoading = false;
						console.log(err, 'rrrr');
						uni.showToast({
							title: '出错了',
							icon: 'none'
						});
					});
			}

		}
	}
</script>
<style lang="less" scoped>
	/deep/ .u-drawer-bottom {
		background-color: rgba(0, 0, 0, 0) !important;
	}

	/deep/ .u-mode-center-box {
		background-color: rgba(0, 0, 0, 0) !important;
	}
</style>
<style scoped lang="scss">
	.page {
		height: 100vh;
		background-color: #111113;
		padding: 0 30rpx;
	}

	.top_con {
		background-color: #212123;
		border-radius: 16rpx;
		padding: 24rpx 30rpx;
		box-sizing: border-box;
		height: 47%;
	}

	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 64rpx;
	}

	.t_left {
		color: #fff;
		font-size: 26rpx;
		font-family: PingFang SC;
		display: flex;
		align-items: center;
	}

	.line {
		width: 4rpx;
		height: 34rpx;
		border-radius: 4rpx;
		background: linear-gradient(to bottom, $button-color-bg-lin-left, $button-color-bg-lin-right);
		margin-right: 11rpx;
	}

	.t_right {
		background: #393a3b;
		width: 64rpx;
		height: 64rpx;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.clear-img {
		width: 30rpx;
		height: 34rpx;
	}

	.textare {
		height: calc(100% - 222rpx);
		margin: 24rpx 0;
	}

	.text_2 {
		color: #ffffff;
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 32rpx;
		height: 100%;
		width: 100%;
	}


	.t_bott {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		height: 110rpx;
	}

	.image_3 {
		width: 35rpx;
		height: 35rpx;
		margin-right: 8rpx;
	}

	.bot_le {
		display: flex;
		align-items: center;
		margin-bottom: 12rpx;
	}

	.mr-16 {
		margin-right: 16rpx;
	}

	.le_two {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 22rpx;
		color: #fff;
		width: 150rpx;
		height: 60rpx;
		border-radius: 8rpx;
		background: #303030;
		padding: 6rpx 0;
	}

	.image_15 {
		width: 36rpx;
		height: 42rpx;
		margin-bottom: 12rpx;
	}

	.image_gif {
		width: 90%;
		height: 36rpx;
		margin-bottom: 12rpx;
	}

	.bot_ri {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 22rpx;
		color: #fff;
		width: 110rpx;
		height: 110rpx;
		border-radius: 16rpx;
		background: #303030;
	}

	.bot_ri_active {
		background: linear-gradient(-90deg, $button-color-bg-lin-left, $button-color-bg-lin-right) !important;
	}



	.text_num {
		text-align: right;
		color: #ffffff;
		font-size: 26rpx;
		padding: 12rpx;
	}

	.text_num text {
		color: #949494;
	}

	/* 语种 */
	.languages_con {
		background-color: #212123;
		border-radius: 16rpx;
		overflow: hidden;
		height: calc(50% - 220rpx - 69px);
		/* padding: 30rpx; */
		/* box-sizing: border-box; */
	}

	.scrollView {
		height: calc(100% - 100rpx);

	}

	.languages_ul {
		max-height: 100%;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		padding: 16rpx 24rpx;
		box-sizing: border-box;
		/* overflow-x: auto; */
	}

	.scrollView::-webkit-scrollbar {
		width: 0;
	}

	.languages_li {
		width: calc(20% - 16rpx);
		height: 140rpx;
		background: #393a3b;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 14rpx;
		margin-bottom: 14rpx;
		font-size: 22rpx;
		white-space: nowrap;
		border-radius: 16rpx;
		position: relative;
		border: 2rpx solid #393a3b;

	}

	.languages_li:nth-child(5n) {
		margin-right: 0;
	}
	
	.fourli{
		width: calc(25% - 16rpx);
		height: 200rpx;
		background: #393a3b;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 14rpx;
		margin-bottom: 14rpx;
		font-size: 22rpx;
		white-space: nowrap;
		border-radius: 16rpx;
		position: relative;
		border: 2rpx solid #393a3b;
	}
	.fourli:nth-child(4n) {
		margin-right: 0;
	}

	.border_green {
		border: 2rpx solid $theme-color;
	}

	.li_text {
		width: 90%;
		overflow: hidden;
		text-align: center;
	}

	.addli {
		font-size: 48rpx;
	}

	.edit {
		position: absolute;
		bottom: 0;
		right: 0;
		background: #444546;
		/* width: 54rpx;
		height: 54rpx; */
		padding: 2rpx;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}



	.bottom {
		width: 100%;
		height: 140rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #111113;
		z-index: 6;
		padding-top: 10rpx;
	}

	.btn {
		background: linear-gradient(to right, $button-color-bg-lin-left, $button-color-bg-lin-right);
		font-size: 32rpx;
		color: #fff;
		font-family: PingFang SC;
		width: 70%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50rpx;
		margin: auto;
	}

	.linetab {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 6rpx;
		background-color: #373737;
	}

	.image_18 {
		position: absolute;
		top: 0rpx;
		right: 0rpx;
	}

	.image_5 {
		width: 60rpx;
		height: 26rpx;
	}

	.edit-img {
		width: 38rpx;
		height: 38rpx;
	}

	/* ai生成弹窗 */
	.ai-gif-class {
		width: 157rpx;
		height: 159rpx;
	}
	
</style>